<template>
	<view>
		<view class="user-section">
			<image class="bg" src="/static/1.png"></image>	
		</view>
	<u-grid :col="2">
			<u-grid-item>
				<u-icon name="photo" :size="46"></u-icon>
				<view class="grid-text">一卡通介绍</view>
			</u-grid-item>
			<u-grid-item>
				<u-icon name="lock" :size="46"></u-icon>
				<view class="grid-text">一卡通功能</view>
			</u-grid-item>
			<u-grid-item>
				<u-icon name="hourglass" :size="46"></u-icon>
				<view class="grid-text">购买一卡通</view>
			</u-grid-item>
			<u-grid-item>
				<u-icon name="photo" :size="46"></u-icon>
				<view class="grid-text">商品介绍</view>
			</u-grid-item>
			
		</u-grid>

	</view>
</template>

<script>
	import {  
	    mapState,  
	    mapMutations  
	} from 'vuex';  
	export default {
		data() {
			return {
				customStyle: {
					width:'80%',
					height:'50px',
					borderRadius:'30px',
					marginTop: '40px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#fff',
					background:'red',
							}
			};
		},
		computed:{
			...mapState(['userInfo']),
		}
	}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
	}
	.user-section{
		display:flex;
		align-items:center;
		justify-content: center;
		height: 380upx;
		padding: 40upx 30upx 0;
		position:relative;
		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: .7;
		}
		.portrait-box{
			width: 200upx;
			height: 200upx;
			border:6upx solid #fff;
			border-radius: 50%;
			position:relative;
			z-index: 2;
		}
		.portrait{
			position: relative;
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
		.yticon{
			position:absolute;
			line-height: 1;
			z-index: 5;
			font-size: 48upx;
			color: #fff;
			padding: 4upx 6upx;
			border-radius: 6upx;
			background: rgba(0,0,0,.4);
		}
		.pt-upload-btn{
			right: 0;
			bottom: 10upx;
		}
		.bg-upload-btn{
			right: 20upx;
			bottom: 16upx;
		}
	}
	.u-grid-item{
		height: 126px;
	}
	    
	


</style>
